<!-- 核心数据界面 -->
<template>
    <div>
      <div class="head">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/SoftwareCore' }">软件信息</el-breadcrumb-item>
          <el-breadcrumb-item>核心数据</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content">
        <el-card shadow="hover">
          <div slot="header" class="cardTitle">
              使用数量
          </div>
          <div class="cardContent">
            <div id="myChart"></div>
          </div>
        </el-card>
        <div class="downCard">
          <el-card class="radarCard" shadow="hover">
            <div slot="header" class="cardTitle">
                使用时间分布情况
            </div>
            <div class="cardContent">
              <div id="myChartRadar"></div>
            </div>
          </el-card>
          <div class="rightView" v-show="false">
            <el-card shadow="hover">
              <div slot="header" class="cardTitle">

              </div>
            </el-card>
            <el-card shadow="hover">
              <div slot="header" class="cardTitle">
                
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
      
  export default({
    data() {
      return {
        key: value
      }
    },
    mounted(){      
      this.drawLine();
    },
    methods: {
      drawLine(){
        let myChart = this.$echarts.init(document.getElementById('myChart'), null, {
          width: 1220,
          height: 400
        });
        let myChartRadar= this.$echarts.init(document.getElementById('myChartRadar'),null,{
          width: 625,
          height: 500
        })
        myChart.setOption({
            tooltip: {
              confine:{
                default:true
              },
            },
            // legend: {
            //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            // },
            grid: {
              left: '0%',
              right: '3%',
              bottom: '0%',
              top:'2%',
              containLabel: true,
            },
            xAxis: {
                type: 'category',
                axisLabel:{  
                         interval:0,//横轴信息全部显示  
                    },  
                boundaryGap: false,
                data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
            },
            yAxis: {
                type: 'value'
              },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              areaStyle: {}
            }
            ] 
        });
        myChartRadar.setOption({
          legend: {
            data: ['节假日', '工作日']
          },
          radar: {
            // shape: 'circle',
            indicator: [
              { name: 'Sales', max: 6500 },
              { name: 'Administration', max: 16000 },
              { name: 'Information Technology', max: 30000 },
              { name: 'Customer Support', max: 38000 },
              { name: 'Development', max: 52000 },
              { name: 'Marketing', max: 25000 }
            ]
          },
          series: [
            {
              name: 'Budget vs spending',
              type: 'radar',
              data: [
                {
                  value: [4200, 3000, 20000, 35000, 50000, 18000],
                  name: '节假日'
                },
                {
                  value: [5000, 14000, 28000, 26000, 42000, 21000],
                  name: '工作日'
                }
              ]
            }
          ]
        })
      }
    }
  })
  </script> 
  <style scoped>
  .radarCard{
    width: 650px;
    margin-top: 20px;
  }
  .downCard .rightView{
    width: 580px;
  }
  .downCard{
    display: flex;
  }
  .rightView .el-card{
    margin-top: 20px;
    margin-left: 20px;
  }
  </style>